<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="verifyPassword"
          type="password"
          name="verifyPassword"
          label="确认密码"
          placeholder="确认密码"
          :rules="[{ required: true, message: '请再次输入密码' }]"
      />
    </van-cell-group>
    <div style="margin: 20px;">
      <van-button round block color="#FF6969" native-type="submit">
        注册
      </van-button>
      <van-button color="#3DB300" round block @click="router.push('/login')" style="margin-top: 20px">
        返回
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
  import {ref} from "vue";
  import router from "@/router";
  import {register} from "@/api/user";
  import {Notify, Toast} from "vant";

  const phone = ref('');
  const password = ref('');
  const verifyPassword = ref('');

  const onSubmit = (values) => {
    console.log('submit', values);
    register(values.phone, values.password, values.verifyPassword).then(res => {
      if (res.code === 20000) {
        Toast('注册成功');
        router.push('login')
      } else {
        Notify({ type: 'warning', message: `${res.description}` });
        console.log('register error')
      }
    }).catch(res => {
      console.log(res.message)
    });
  };
</script>

<style scoped>

</style>
